<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>在线考试系统</title>
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css}" />
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css}" />
    <!-- TODO::文件上传 -->
    <!--<link rel="stylesheet" th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" />-->
    <!--<link rel="stylesheet" th:href="@{https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/css/fileinput.min.css}" />-->

    <link rel="stylesheet" th:href="@{/css/app.css}" />
    <link rel="stylesheet" th:href="@{/css/user/profile.css}" />
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js}"></script>
    <!-- TODO::bootstrapInput文件上传 -->
    <!--<script type="text/javascript" th:src="@{https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>-->
    <!--<script type="text/javascript" th:src="@{https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/js/fileinput.min.js}"></script>-->
    <!--<script type="text/javascript" th:src="@{https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/js/locales/zh.min.js}"></script>-->

    <script type="text/javascript" th:src="@{/js/app.js}"></script>
    <script type="text/javascript" th:src="@{/js/user/profile.js}"></script>
</head>
<body>
<!-- 页面引用：菜单 -->
<div th:replace="common/menu :: menu-user"></div>


<div class="ui main container">
    <div class="ui grid">
        <div class="four wide column">
            <div class="row">
                <div class="ui card">
                    <div class="blurring dimmable image">
                        <div class="ui dimmer">
                            <div class="content">
                                <div class="center">
                                    <!--<div class="ui inverted button">Call to Action</div>-->
                                    <!-- TODO::上传图片 -->
                                    <a th:href="@{/account/profile}" data-inverted="" data-tooltip="更换头像" data-position="bottom center"><i class="huge photo icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <img th:src="@{'/upload/images/'+${current_account.avatarImgUrl}}" />
                    </div>
                    <div class="content">
                        <div class="header" th:text="${current_account.name}"></div>
                        <div class="meta">
                            <!--<a class="group">信息学院</a>-->
                            <div class="group">
                                <i class="student icon"></i>信息学院
                            </div>
                        </div>
                        <div class="description" th:text="${current_account.description}"></div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 1em;">
                <div class="ui card">
                    <div class="content">
                        <a th:href="@{/account/profile}">
                            <i class="user icon"></i>个人信息
                        </a>
                        <i class="pointing left icon"></i>
                    </div>
                    <div class="content">
                        <a th:href="@{/account/password}">
                            <i class="edit icon"></i>更改密码
                        </a>
                    </div>
                    <div class="content">
                        <a th:href="@{/account/myExam}">
                            <i class="history icon"></i>考试记录
                        </a>
                    </div>
                    <div class="content">
                        <a th:href="@{/account/myDiscussPost}">
                            <i class="talk icon"></i>我的发帖
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="twelve wide column">
            <div class="ui segment">
                <h4 class="ui dividing header">基本信息</h4>
                <form class="ui form attached fluid segment" id="updateAccountForm">
                    <div class="ui hidden negative message" id="updateAccountErrorMessage">
                        <!--
                        <div class="header">错误提示</div>
                        <p></p>
                        -->
                    </div>
                    <div class="field">
                        <label><i class="user icon"></i>姓名</label>
                        <input id="myName" name="myName" readonly="" placeholder="请输入姓名"
                               type="text" th:value="${current_account.name}" />
                    </div>
                    <div class="field">
                        <label><i class="student icon"></i>学号</label>
                        <input id="myUsername" name="myUsername" readonly="" placeholder="请输入学号"
                               type="text" th:value="${current_account.username}" />
                    </div>
                    <div class="field">
                        <label><i class="qq icon"></i>QQ</label>
                        <input id="myQq" name="myQq" placeholder="请输入QQ" type="text"
                               th:value="${current_account.qq}" />
                    </div>
                    <div class="field">
                        <label><i class="mobile icon"></i>手机号码</label>
                        <input id="myPhone" name="myPhone" placeholder="请输入手机号码" type="text"
                               th:value="${current_account.phone}" />
                    </div>
                    <div class="field">
                        <label><i class="mail outline icon"></i>邮箱</label>
                        <input id="myEmail" name="myEmail" placeholder="请输入邮箱地址" type="text"
                               th:value="${current_account.email}" />
                    </div>
                    <div class="field">
                        <label><i class="upload icon"></i>上传头像</label>
                        <div class="ui three column grid">
                            <div class="column">
                                <div class="ui fluid card">
                                    <div class="image">
                                        <img id="avatarImgPreview" class="ui tiny image" th:src="@{'/upload/images/'+${current_account.avatarImgUrl}}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="file" id="myfile" name="myfile" value="" onchange="profilePage.uploadAvatar()"/>
                        <input type="hidden" id="myAvatarImgUrl" name="myAvatarImgUrl" value="" />
                    </div>
                    <div class="field">
                        <label><i class="smile icon"></i>自我描述</label>
                        <textarea  id="myDescription" name="myDescription" rows="6"
                                   th:text="${current_account.description}"></textarea>
                    </div>
                    <div class="ui primary button" id="updateAccountButton">保存</div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 不可抗力元素 -->
<div class="second-footer">
</div>
<!-- 页脚引用 -->
<div th:replace="common/footer :: footer"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    var contextPath = /*[[${#httpServletRequest.getContextPath()}]]*/;

    $(function(){
        app.init(contextPath);
        profilePage.init();
    });
    /*]]>*/
</script>
</body>
</html>